<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <!-- 引入样式 -->
<!--    <link rel="stylesheet" href="./css/index.css">-->
<!--    &lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--    <script src="./js/index.js"></script>-->
<!--    ui库-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--    路由-->
<!--    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
    <script src="./js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            header
        </el-header>
        <el-container>
            <el-aside width="200px">
                <div>
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            :router="true"
                            :default-active="this.$route.path"
                    >
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-s-promotion"></i>
                                <span>微博系统</span>
                            </template>
                            <el-menu-item-group>
                                <el-submenu index="1-2">
                                    <template slot="title"><i class="el-icon-document"></i>微博管理</template>
                                    <el-menu-item index="/addBlog">添加微博</el-menu-item>
                                    <el-menu-item index="/bloglisturl">微博列表</el-menu-item>
                                </el-submenu>
                            </el-menu-item-group>
                            <el-menu-item-group>
                                <el-submenu index="1-1">
                                    <template slot="title"><i class="el-icon-user"></i>用户管理</template>
                                    <el-menu-item index="/addUser">编辑用户</el-menu-item>
                                    <el-menu-item index="/userlisturl">用户列表</el-menu-item>
                                </el-submenu>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </div>

            </el-aside>
            <el-container>
<!--                main stat-->
                <el-main>

                    <router-view></router-view>

                </el-main>
<!--                main end-->
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>
<!--微博列表-->
<template id="blogListPageTemplete">
    <div>
        <el-table
                :data="blogList"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="内容"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="publishtime"
                    label="发布时间">
            </el-table-column>
            <el-table-column
                    prop="userid"
                    label="用户">
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pageSize"
                :page-count="totalPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count">
        </el-pagination>
    </div>
</template>
<!--添加微博-->
<template id="addBlogTemplete">
    <div>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="微博内容">
                <el-input type="textarea" rows="5" v-model="form.content"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<!--添加用户-->
<template id="userAddTemplate">
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="ruleForm.sex" placeholder="请选择性别">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否管理员" prop="supper">
                <el-switch v-model="ruleForm.supper"></el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<template id="userListPageTemplate">
    <div>
        这个是用户列表
    </div>
</template>
<script>
    var UserListPage = {
        template: "#userListPageTemplate"
    }
    var AddUser = {
        template: "#userAddTemplate",
        data() {
            return {
                ruleForm: {
                    username:'',
                    password:'',
                    supper:0,
                    sex:'',
                    picpath:''
                    // age:'',
                    // nickname:'',
                    // mobile:'',
                    // address:'',
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    console.log(this.ruleForm)
                        //提交数据
                        axios({
                            method: 'post',
                            url: 'http://localhost:8080/addUser',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            transformRequest: [function (data) {
                                let ret = ''
                                for (let it in data) {
                                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                                }
                                return ret
                            }],
                            data: this.ruleForm
                        }).then(response => {
                            debugger
                            console.log(response);
                            console.log(this)
                            if(response.data.status == '200'){
                                this.$message({
                                    message: '用户记录添加成功。',
                                    type: 'success',
                                    showClose: true,
                                    duration:3000
                                });
                                this.$router.replace("/userlisturl")
                            }else{
                                this.$message.error('用户记录添加失败。');
                            }
                        }).catch(function (error) { // 请求失败处理
                                console.log(error);
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
    var AddBlog = {
        template: "#addBlogTemplete",
        data() {
            return {
                form: {
                    content: ''
                }
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/addBlog',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                    data: this.form
                }).then(response => {
                    debugger
                    console.log(response);
                    console.log(this)
                    if(response.data.status == '200'){
                        this.$message({
                            message: '微博记录添加成功。',
                            type: 'success',
                            showClose: true,
                            duration:3000
                        });
                        this.$router.replace("/bloglisturl")
                    }else{
                        this.$message.error('微博记录添加失败。');
                    }
                })
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });

            }
        }
    }
    var BlogList = {
        template: "#blogListPageTemplete",
        data(){
         return {
             blogList: [],
             count:0, //总记录数
             current:1, //当前页
             pageSize:10, //每页记录数
             totalPage:1
         }
        },
        created(){
            debugger
            // 获取远端图片
            this.getBlogPageList();
        },
        methods: {
            //封装分页公共方法
            getBlogPageList(){
                debugger
                axios({
                    method:'get',
                    url:'http://localhost:8080/blogListPage',
                    params: {
                        current: this.current,
                        pageSize:this.pageSize
                    }
                }).then(res =>{
                    debugger
                    this.blogList = res.data.objList
                    this.count = res.data.count,
                        this.current = res.data.current,
                        this.pageSize = res.data.pageSize,
                        this.totalPage = res.data.totalPage
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.getBlogPageList();

            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.current = val;
                this.getBlogPageList();
            }
        }
    }
    //全局注册
    // Vue.component('bloglist', BlogList)


    const routes = [
        { path: '/bloglisturl', component: BlogList },
        { path: '/addBlog', component: AddBlog },
        { path: '/addUser', component: AddUser },
        { path: '/userlisturl', component: UserListPage },
        { path: '*', redirect: '/bloglisturl' },
    ]
    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    })

    var app = new Vue({
        el: '#app',
        router,
        data: {
            supper:0 //是否是管理用户
        },
        created(){
        },
        methods:{
            //菜单开
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            //菜单关闭
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }

    })
</script>
<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }
</style>
</body>
</html>